<template>
    <div class="page-content">
        <!-- 表格头部——start -->
        <table-bar :columns="columns">
            <div slot="top">
                <el-form label-width="4.375rem" >
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="鸽棚编号" label-width="90px">
                                <el-select
                                    v-model="value"
                                    placeholder="请选择"
                                    @change="changeType"
                                >
                                    <el-option
                                        v-for="item in conditionTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :xs="24"
                            :sm="12"
                            :lg="6"
                            style="float: right; margin-right: 0.625rem"
                        >
                            <el-button type="primary"
                                >搜索</el-button
                            >
                            <el-button>重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </table-bar>
        <!-- 表格头部——end -->
        <!-- 表格——start -->
        <the-table :data="tableData">
            <el-table-column prop="dovecote_number" label="鸽棚编号">
            </el-table-column>
            <el-table-column prop="cage_id" label="鸽笼位置"> </el-table-column>
            <el-table-column prop="information" label="异常信息">
            </el-table-column>
            <el-table-column prop="start_time" label="起始时间">
            </el-table-column>
            <el-table-column prop="end_time" label="结束时间">
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        icon="el-icon-share"
                        @click="seeDetail(scope.row)"
                        >详情</el-button
                    >
                    <el-button
                        type="text"
                        style="color: #fa6962"
                        icon="el-icon-delete"
                        @click="tableDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </the-table>
        <!-- 表格——end -->
        <!-- 分页——start -->
        <el-pagination
            :page-sizes="[1, 5, 10, 15]"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="page"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        >
        </el-pagination>
        <!-- 分页——end -->
        <!-- 弹框——start -->
        <el-dialog
            title="详情信息"
            :visible.sync="dialogTableVisible"
            width="70%"    
            height="50rem"    >
            <el-row :gutter="5" style="padding-top:40px">
                <!-- 右侧——start -->
                <el-col :span="15"
                    ><div class="grid-content bg-purple-light">
                            <iframe
                                v-if="isVideo"
                                :src="videoUrl"
                                width="600"
                                height="350"
                                allowfullscreen
                            ></iframe></div
                ></el-col>
                <!-- 右侧——end -->
                                <!-- 左侧——start -->
                <el-col :span="9"
                    ><div
                        class="grid-content bg-purple data"
                        style="height: 500px"
                    >
                        <span>鸽棚编号: {{ detailInfo.dovecote_number }}</span
                        ><br />
                        <span>鸽笼位置： {{ detailInfo.cage_id }}</span
                        ><br />
                        <span
                            >异常信息：
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder=""
                                :value="detailInfo.information"
                                size="medium"
                            >
                            </el-input></span
                        ><br />
                        <span>起始时间: {{ detailInfo.start_time }}</span
                        ><br />
                        <span>终止时间: {{ detailInfo.end_time }}</span
                        ><br /></div
                ></el-col>
                <!-- 左侧——end -->
            </el-row>
        </el-dialog>
        <!-- 弹框——end -->
    </div>
</template>

<script>
export default {
    name: "Warning",
    meta: {
        title: "预测预警",
    },
    data() {
        return {
            msg: "这里是预测预警页面",
            //表头column
            columns: [
                {
                    name: "鸽棚编号",
                    show: true,
                },
                {
                    name: "鸽笼位置",
                    show: true,
                },
                {
                    name: "异常信息",
                    show: true,
                },
                {
                    name: "起始时间",
                    show: true,
                },
                {
                    name: "结束时间",
                    show: true,
                },
            ],
            //表格数据
            tableData: [
                {
                    dovecote_number: "A01",
                    cage_id: "3排3行23列",
                    information: "鸽子掉落",
                    start_time: "2021-10-27 19:32:58",
                    end_time: "2021-10-27 19:33:58",
                },
                {
                    dovecote_number: "A02",
                    cage_id: "3排3行25列",
                    information: "出现踩蛋行为",
                    start_time: "2021-10-27 19:32:58",
                    end_time: "2021-10-27 19:33:58",
                },
                {
                    dovecote_number: "A01",
                    cage_id: "3排2行25列",
                    information: "鸽子打架",
                    start_time: "2021-10-27 19:32:58",
                    end_time: "2021-10-27 19:33:58",
                },
                {
                    dovecote_number: "A01",
                    cage_id: "3排1行22列",
                    information: "鸽子抢食",
                    start_time: "2021-10-27 19:32:58",
                    end_time: "2021-10-27 19:33:58",
                },
            ],
            pageSize: 5, //数据条数
            pageNum: 1, //页码
            total: 5, //总数
            dialogTableVisible: false, //弹框显示
            detailInfo: {
                //详情信息
                dovecote_number: "A01",
                cage_id: "3排3行23列",
                information: "鸽子掉落",
                start_time: "2021-10-27 19:32:58",
                end_time: "2021-10-27 19:33:58",
                picture:
                    "https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0",
            },
            isVideo: false,
            videoUrl: 'http://120.77.156.205:9800/group1/cageVideo/ecd06c38-6a73-4a59-8e98-3c71ba3a9884.mp4',
            value: '',
            conditionTypeOptions:[
                {
                    value: "1",
                    label: "A01",
                },
                {
                    value: "2",
                    label: "A02",
                },
                {
                    value: "3",
                    label: "A03",
                }
            ]
        };
    },
    methods: {
        //选择页数
        handleCurrentChange() {},

        //改变条数
        handleSizeChange() {},

        //表格数据筛选
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout();
        },

        //查看详情
        seeDetail() {
            this.dialogTableVisible = true;
            this.isVideo = true
        },

        //查询
        changeType() {

        },

        //删除
        tableDelete() {},
    },
};
</script>

<style scoped lang="scss">
.dialog /deep/ .el-dialog__body { //修改el-dialog内部样式
background-color:  	#FAFAFA!important;
height: 70px;
}
.page {
    margin-top: 20px;
    text-align: center;
}
.data {
    letter-spacing: 2px;
    line-height: 60px;
}
</style>